<template>
  <div class="app-container">
    表单数据:{{dataForm}}
    <el-card class="box-card">
      <div slot="header" class="clearfix">上传图片</div>
      <div  class="text item">
        <ImageUpload
          v-model="dataForm.imgPic"
          :limit="2"
          :file-type="['png', 'jpg', 'jpeg']"
          :file-size="20"
          :file-width="600"
          :file-height="600"
        />
      </div>
    </el-card>

    <el-card class="box-card">
      <div slot="header" class="clearfix">上传附件</div>
      <div  class="text item">
        <ImageUpload
          v-model="dataForm.enclosure"
          listType="text"
          :file-type="['apk', 'bbs']"
          :limit="6"
          :file-size="20"
        />
      </div>
    </el-card>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        选择弹窗表格组件(单选，多选根据multiple属性配置，接口根据实际需求调整)
      </div>
      <div  class="text item">
        <el-button  @click="isShowSelectUser=true" plain type="primary">
          单选人员
        </el-button>
        <SelectUser v-if="isShowSelectUser" @close="isShowSelectUser=false" @confirm="confirmSelectExamCenter"></SelectUser>

        <el-button  @click="selectOpenExamCenter" plain type="primary">
          多选中心
        </el-button>
        <SelectExamCenter multiple v-if="isShowSelectExamCenter" @close="isShowSelectExamCenter=false" @confirm="confirmSelectExamCenter"></SelectExamCenter>
      </div>
    </el-card>

    <el-card class="box-card">
      <div slot="header" class="clearfix">富文本组件（上传图片，地址根据项目接口调整）</div>
      <div  class="text item">
        <RichTextEditor ref="richTextEditor" :value="dataForm.content" @handleInput="handleInput"></RichTextEditor>
      </div>
    </el-card>

     </div>
</template>

<script>
import RichTextEditor from "@/components/richtext-editor/index.vue";
import ImageUpload from '@/components/muster-upload/Image-Upload/index.vue';
import SelectExamCenter from '@/components/muster-select/selectExamCenter.vue'
import SelectUser from '@/components/muster-select/selectUser.vue'
export default {
  name: 'Demo',
  components: {
    ImageUpload,
    SelectExamCenter,
    RichTextEditor,
    SelectUser
  },
  data() {
    return {
      isShowSelectUser:false,
      isShowSelectExamCenter: false,
      dataForm:{
        imgPic:'',
        content:'',
        enclosure:'',
        coreList:[],
      },
    };
  },
  created() {

  },
  methods: {
    //弹窗表格
    selectOpenExamCenter() {
      this.isShowSelectExamCenter = true;
    },
    //选择中心返回值
    confirmSelectExamCenter(tList) {
      console.log('选择中心', tList);
      this.isShowSelectExamCenter = false;
      const hasDuplicate = tList.find(t => {
        return this.dataForm.coreList.some(v => v.shopId === t.shopId);
      });

      if (hasDuplicate) {
        return this.$message.error('重复选择');
      }
      const transformedList = tList.map(item => {
        return {
          ...item,
          shopId: item.shopId,//中心id
          shopName: item.centerName//中心
        };
      });
      let setObj = [];
      if (this.dataForm.coreList && this.dataForm.coreList.length > 0) {
        setObj = this.dataForm.coreList.concat(transformedList);
      } else {
        setObj = transformedList;
      }
      this.dataForm.coreList = setObj;
    },

    //富文本传值
    handleInput(newContent) {
      this.content = newContent;
    },
  }
};
</script>
<style scoped>
.box-card{
  margin-bottom: 20px;
}
</style>
